import React from 'react';
import { NavigationContainer, RouteProp } from '@react-navigation/native';
import { createBottomTabNavigator, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
import HomeScreen from '@/pages/Home'
import LearningScreen from '@/pages/Learning';
import SocialFeedScreen from '@/pages/SocialFeed';
import MineScreen from '@/pages/Mine';
// Ionicons命名规则：
// ios风格：ios-xxx
// Material Design风格: md-xxx
// 通用风格：xxx (不带前缀)
import Ionicons from 'react-native-vector-icons/Ionicons';
import type { RootTabParamList } from './types'
import { useSelector } from 'react-redux'
import type { RootState } from '@/store';

const Tab = createBottomTabNavigator<RootTabParamList>();

const bottomIconNames: Record<keyof RootTabParamList, string> = {
  Home: 'home',
  Learning: 'book',
  SocialFeed: 'compass',
  Mine: 'ios-person',
}

export default function NavigationView() {
  const count = useSelector((state: RootState) => state.counter.value)

  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }: { route: RouteProp<RootTabParamList> }): BottomTabNavigationOptions => ({
          headerShown: false, // 不显示标题栏
          tabBarIcon: ({ focused, color, size }: {
            focused: boolean;
            color: string;
            size: number;
          }): React.ReactNode => {
            return <Ionicons name={bottomIconNames[route.name]} size={size} color={color} />
          }
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: count }} />
        <Tab.Screen name="Learning" component={LearningScreen} />
        <Tab.Screen name="SocialFeed" component={SocialFeedScreen} />
        <Tab.Screen name="Mine" component={MineScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}